import React, { memo, useEffect } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { myEventAction } from "./store/actionTypes";
import { FriendWrap } from "./style";
import EventComment from "@/components/user/eventComment";
import FriendRightWrap from "./friendRight";
import { isEmpty } from "@/utils/isEmpty";

export default memo(function Friend() {
  const dispatch = useDispatch();

  const userid = isEmpty(JSON.parse(window.localStorage.getItem("userInfo")))
    ? []
    : JSON.parse(window.localStorage.getItem("userInfo")).data.account.id;

  useEffect(() => {
    if (!isEmpty(userid)) {
      dispatch(myEventAction());
    }
  }, [dispatch, window.localStorage.getItem("userInfo")]); // eslint-disable-line react-hooks/exhaustive-deps

  const { myEventInfos } = useSelector(
    (state) => ({
      myEventInfos: state.getIn(["myEvent", "myEvent"]),
    }),
    shallowEqual
  );

  document.title = `网易云音乐`;

  return (
    <FriendWrap>
      {!isEmpty(userid) ? (
        <div className="friendBox wrap-v2">
          <div className="friend-left">
            <div className="title">
              <h4>动态</h4>
              <div className="publish">
                <span className="btn-fbdt frd_dyn"></span>
                <span className="btn-fbsp frd_dyn"></span>
              </div>
            </div>
            <div className="userEventBigBox">
              {myEventInfos.code == 200
                ? myEventInfos.event.map((item, index) => {
                    return item.type == 57 ? (
                      <React.Fragment></React.Fragment>
                    ) : (
                      <EventComment
                        key={index + Math.random()}
                        num={index}
                        userDetailInfo={null}
                        item={item}
                      />
                    );
                  })
                : ""}
            </div>
          </div>
          {!isEmpty(userid) ? <FriendRightWrap userid={userid} /> : null}
        </div>
      ) : (
        <div className="noLogin-friend">
          <div className="wcls">
            你可以关注明星和好友品味他们的私房歌单
            <br />
            通过他们的动态发现更多精彩音乐
          </div>
          <a href="#" className="btn">
            立即登录
          </a>
        </div>
      )}
    </FriendWrap>
  );
});
